<template>
	<view>
		<block v-if="isload">
			<view class="container" v-if="detail.video">
				<view style="background: #000;height: 100vh;">
					<video class="myVideo" :src="detail.video" autoplay="true" controls="true" custom-cache="false"
						loop="false" enable-play-gesture="true" enable-progress-gesture="true"
						show-center-play-btn="true">
					</video>
				</view>
			</view>
			<view class="container" v-else>
				<view class="header">
					<text class="title">{{ detail.name }}</text>
					<view class="artinfo"
						v-if="detail.showsendtime == 1 || detail.showauthor == 1 || detail.showreadcount == 1">
						<text class="t1" v-if="detail.showsendtime == 1">{{ detail.createtime }}</text>
						<text class="t2" v-if="detail.showauthor == 1">{{ detail.author }}</text>
						<text class="t3" v-if="detail.showreadcount == 1">阅读：{{ detail.readcount }}</text>
					</view>
					<view style="padding:8rpx 0">
						<dp :pagecontent="pagecontent"></dp>
					</view>

				</view>

				<view v-if="goodslist.length > 0">
					<view class="article-itemlist" v-for="(item, index) in goodslist" :key="item.id" @click="goto"
						:data-url="'/pages/shop/product?id=' + item.id">
						<view class="article-pic">
							<image class="image" :src="item.pic" mode="widthFix" />
						</view>
						<view class="article-info">
							<view class="p1">{{ item.name }}</view>
							<view class="price">￥{{ item.sell_price }}</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
var app = getApp();
export default {
	data() {
		return {
			opt: {},
			loading: false,
			isload: false,
			menuindex: -1,
			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url,

			detail: [],
			datalist: [],
			pagenum: 1,
			id: 0,
			pagecontent: "",
			title: "",
			sharepic: "",
			nodata: false,
			nomore: false,
			iszan: "",
			plcount: 0,

			goodslist: []
		};
	},
	onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.getdata();
	},
	onPullDownRefresh: function () {
		this.getdata();
	},
	onShareAppMessage: function () {
		var that = this;
		return this._sharewx({
			title: this.detail.name,
			desc: this.detail.subname,
			pic: this.detail.pic,
			callback: function () {
				that.sharecallback();
			}
		});
	},
	onShareTimeline: function () {
		var that = this;
		var sharewxdata = this._sharewx({
			title: this.detail.name,
			desc: this.detail.subname,
			pic: this.detail.pic,
			callback: function () {
				that.sharecallback();
			}
		});
		var query = (sharewxdata.path).split('?')[1] + '&seetype=circle';
		return {
			title: sharewxdata.title,
			imageUrl: sharewxdata.imageUrl,
			query: query
		}
	},
	onReachBottom: function () {
		if (!this.nodata && !this.nomore && this.detail.canpl == 1) {
			this.pagenum = this.pagenum + 1
			//this.getpllist();
		}
	},
	methods: {
		sharecallback: function () {
			app.post("Article/giveScorenum", {}, function (res) { });
		},
		getdata: function () {
			var that = this;
			var id = that.opt.id;
			that.loading = true;
			app.get('Article/detail', {
				id: id
			}, function (res) {
				that.loading = false;
				if (res.status == 1) {
					that.detail = res.detail;
					that.pagecontent = res.pagecontent;
					that.plcount = res.plcount;
					that.iszan = res.iszan;
					that.title = res.detail.name;
					that.sharepic = res.detail.pic;

					that.goodslist = res.goodslist
					uni.setNavigationBarTitle({
						title: res.detail.name
					});
				} else {
					app.alert(res.msg);
				}
				that.pagenum = 1;
				that.datalist = [];
				//that.getpllist();
				that.loaded({
					title: res.detail.name,
					desc: res.detail.subname,
					pic: res.detail.pic
				});
			});
		},
		getpllist: function () {
			var that = this;
			var pagenum = that.pagenum;
			that.loading = true;
			that.nodata = false;
			that.nomore = false;
			app.post('Article/getpllist', {
				pagenum: pagenum,
				id: that.detail.id
			}, function (res) {
				that.loading = false;
				var data = res.data;
				if (data.length == 0) {
					if (pagenum == 1) {
						that.nodata = true;
					} else {
						that.nomore = true;
					}
				}
				var datalist = that.datalist;
				var newdata = datalist.concat(data);
				that.datalist = newdata;
			});
		},
		zan: function (e) {
			var that = this;
			var id = e.currentTarget.dataset.id;
			app.post("Article/zan", {
				id: id
			}, function (res) {
				if (res.type == 0) {
					//取消点赞
					var iszan = 0;
				} else {
					var iszan = 1;
				}
				that.iszan = iszan;
				that.detail.zan = res.zancount;
			});
		},
		pzan: function (e) {
			var that = this;
			var id = e.currentTarget.dataset.id;
			var index = e.currentTarget.dataset.index;
			var datalist = that.datalist;
			app.post("Article/pzan", {
				id: id
			}, function (res) {
				if (res.type == 0) {
					//取消点赞
					var iszan = 0;
				} else {
					var iszan = 1;
				}

				datalist[index].iszan = iszan;
				datalist[index].zan = res.zancount;
				that.datalist = datalist;
			});
		},
		changeReward: function () {
			var that = this;
			that.openreward = !that.openreward;
			that.reward_type = 1;
			that.reward_num_type = 1;
			that.reward_num = '';
		},
		changeRewardtype: function (e) {
			var that = this;
			var type = e.currentTarget.dataset.type;
			that.reward_type = type;
			that.reward_num = '';
		},
		changeRewardNumType: function (e) {
			var that = this;
			var reward_num_type = that.reward_num_type;
			if (reward_num_type == 1) {
				that.reward_num_type = 2;
			} else {
				that.reward_num_type = 1;
			}
			that.reward_num = '';
		},
		inputRewardnum: function (e) {
			var that = this;
			var reward_type = that.reward_type;
			var num = e.detail.value;
			var index = num.indexOf('.');
			if (reward_type == 2) {
				if (index >= 0) {
					// app.alert(that.t('积分')+'必须为整数');
					// return;
					num = parseInt(num);
				}
			} else {
				if (index >= 0) {
					var slice_index = index + 1;
					var afternum = num.slice(slice_index);
					var len = afternum.length;
					if (len > 2) {
						num = parseInt(num * 100) / 100;
					}
				}
			}
			setTimeout(function () {
				console.log(num);
				that.reward_num = num;
			}, 0)
			//that.$set(that, 'reward_num', num);
		},
		selRewardnum: function (e) {
			var that = this;
			var reward_type = that.reward_type;
			var num = e.currentTarget.dataset.num;
			that.reward_num = num;
			that.postReward();
		},
		postReward: function () {
			var that = this;
			var reward_type = that.reward_type;
			var reward_num = that.reward_num;
			if (reward_type == 1) {
				var msg = '确定打赏' + reward_num + '元吗？';
			} else {
				var msg = '确定打赏' + reward_num + that.t('积分') + '吗？';
			}
			app.confirm(msg, function () {
				var data = {
					id: that.opt.id,
					reward_type: reward_type,
					reward_num: reward_num
				}
				app.post('Article/reward', data, function (res) {
					if (res.status == 1) {
						if (reward_type == 2) {
							app.alert(res.msg);
							setTimeout(function () {
								that.getdata();
								that.changeReward();
							}, 800)
						} else {
							app.goto('/pages/pay/pay?id=' + res.payorderid);
						}
					} else {
						app.alert(res.msg);
					}
				})
			})
		}
	}
};
</script>
<style>
.header {
	background-color: #fff;
	padding: 10rpx 20rpx 0 20rpx;
	position: relative;
	display: flex;
	flex-direction: column;
}

.header .title {
	width: 100%;
	font-size: 36rpx;
	color: #333;
	line-height: 1.4;
	margin: 10rpx 0;
	margin-top: 20rpx;
	font-weight: bold
}

.header .artinfo {
	width: 100%;
	font-size: 28rpx;
	color: #8c8c8c;
	font-style: normal;
	overflow: hidden;
	display: flex;
	margin: 10rpx 0;
}

.header .artinfo .t1 {
	padding-right: 8rpx
}

.header .artinfo .t2 {
	color: #777;
	padding-right: 8rpx
}

.header .artinfo .t3 {
	text-align: right;
	flex: 1;
}

.header .subname {
	width: 100%;
	font-size: 28rpx;
	color: #888;
	border: 1px dotted #ddd;
	border-radius: 10rpx;
	margin: 10rpx 0;
	padding: 10rpx
}


.pinglun {
	width: 96%;
	max-width: 750px;
	margin: 0 auto;
	position: fixed;
	display: flex;
	align-items: center;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background: #fff;
	z-index: 10;
	border-top: 1px solid #f7f7f7;
	padding: 0 2%;
	box-sizing: content-box
}

.pinglun .pinput {
	flex: 1;
	color: #a5adb5;
	font-size: 32rpx;
	padding: 0;
	line-height: 100rpx
}

.pinglun .zan {
	padding: 0 12rpx;
	line-height: 100rpx
}

.pinglun .zan image {
	width: 48rpx;
	height: 48rpx
}

.pinglun .zan span {
	height: 40rpx;
	line-height: 50rpx;
	font-size: 32rpx
}

.pinglun .buybtn {
	margin-left: 0.08rpx;
	background: #31C88E;
	height: 72rpx;
	line-height: 72rpx;
	padding: 0 20rpx;
	color: #fff;
	border-radius: 6rpx
}

.plbox {
	width: 100%;
	padding: 40rpx 20rpx;
	background: #fff;
	margin-top: 10px
}

.plbox_title {
	font-size: 28rpx;
	height: 60rpx;
	line-height: 60rpx;
	margin-bottom: 20rpx
}

.plbox_title .t1 {
	color: #000;
	font-weight: bold
}

.plbox_content .plcontent {
	vertical-align: middle;
	color: #111
}

.plbox_content .plcontent image {
	width: 44rpx;
	height: 44rpx;
	vertical-align: inherit;
}

.plbox_content .item1 {
	width: 100%;
	margin-bottom: 20rpx
}

.plbox_content .item1 .f1 {
	width: 80rpx;
}

.plbox_content .item1 .f1 image {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%
}

.plbox_content .item1 .f2 {
	flex: 1
}

.plbox_content .item1 .f2 .t1 {}

.plbox_content .item1 .f2 .t2 {
	color: #000;
	margin: 10rpx 0;
	line-height: 60rpx;
}

.plbox_content .item1 .f2 .t3 {
	color: #999;
	font-size: 20rpx
}

.plbox_content .item1 .f2 .pzan image {
	width: 32rpx;
	height: 32rpx;
	margin-right: 2px
}

.plbox_content .item1 .f2 .phuifu {
	margin-left: 6px;
	color: #507DAF
}

.plbox_content .relist {
	width: 100%;
	background: #f5f5f5;
	padding: 4rpx 20rpx;
	margin-bottom: 20rpx
}

.plbox_content .relist .item2 {
	font-size: 24rpx;
	margin-bottom: 10rpx
}

.copyright {
	display: none
}

.reward_typel {
	width: 150rpx;
	display: inline-block;
	border-radius: 8rpx 0 0 8rpx;
}

.reward_typer {
	width: 150rpx;
	display: inline-block;
	border-radius: 0rpx 8rpx 8rpx 0rpx;
}

.reward_content {
	width: 180rpx;
	border-radius: 8rpx;
	border: 2rpx solid #FA5151;
	float: left;
	margin-top: 20rpx;
	overflow: hidden;
	white-space: nowrap;
}

.reward_num {
	background-color: #FA5151;
	color: #fff
}

.reward_num_type {
	width: 200rpx;
	margin: 20rpx auto;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	color: #536084;
	overflow: hidden;
}


.article-itemlist {
	display: inline-block;
	position: relative;
	/* margin-bottom: 12rpx; */
	padding: 30rpx 0rpx;
	background: #fff;
	display: flex;
	border-radius: 8rpx;
	margin: 20rpx;
}

.article-itemlist .article-pic {
	width: 200rpx;
	height: 200rpx;
	overflow: hidden;
	background: #ffffff;
	padding-bottom: 25%;
	position: relative;
	border-radius: 16rpx;
}

.article-itemlist .article-pic .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto
}

.article-itemlist .article-info {
	width: 65%;
	height: auto;
	overflow: hidden;
	padding: 0 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

.article-itemlist .article-info .p1 {
	color: #222222;
	font-weight: bold;
	font-size: 28rpx;
	line-height: 46rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height: 92rpx
}

.article-itemlist .article-info .price {
	color: #eb544d;
	font-size: 28rpx;
	font-weight: bold;
}

.article-itemlist .article-info .p2 {
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 24rpx;
	color: #a88;
	overflow: hidden;
	padding-bottom: 6rpx
}

.myVideo {
	width: 100%;
	margin: auto;
	margin-top: 50%;
}
</style>